<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      li {
         list-style: none;
      }

      a {
         text-decoration: none;
      }

      html {
         font-size: 10px;
         overflow-y: scroll;
      }

      :root {
         overflow-y: auto;
         overflow-x: hidden;
      }

      :root body {
         position: absolute;
      }

      body {
         width: 100vw;
         overflow: hidden;
      }

      /* header----------------------------------------- */

      header {
         width: 100vw;
         height: 7vh;
         background-color: #ff8a00;
         display: flex;
         justify-content: space-between;
      }

      header img {
         height: 5vh;
         margin: 0.5rem 1rem;
      }

      header div:nth-child(2) img {
         width: 7vw;
      }


      /* footer------------------------------------------------------- */

      footer {
         width: 100vw;
         height: 17vh;
         position: relative;
         bottom: 0;
         background-color: #2f3130;
         color: rgb(106, 108, 107);
         padding-bottom: 5vh;
      }

      footer p {
         padding: 1vh;
         border-bottom: 1px solid rgb(231, 231, 231);
      }

      footer a {
         text-decoration: none;
         color: rgb(106, 108, 107);
         font-weight: bolder;
      }

      footer ul {
         text-align: center;
         padding-bottom: 2vh;
      }

      footer ul li:nth-child(1) {
         display: flex;
         justify-content: center;
      }

      footer ul li:nth-child(1)>div {
         display: flex;
         width: 10rem;
         height: 5rem;
         margin-top: 1rem;
      }

      footer ul li:nth-child(1)>div img {
         width: 2.5rem;
         height: 2.5rem;
         margin-right: 1rem;
      }

      .tou {
         height: 5vh;
         line-height: 5vh;
         width: 90vw;
         margin: auto;
      }

      .tou a:nth-of-type(1) {
         font-weight: bolder;
      }


      /* nav------------------------------- */

      nav {
         width: 100vw;
         height: 30vh;
         position: relative;
      }

      nav img {
         width: 100vw;
         height: 30vh;
      }

      nav span {
         background-color: rgba(0, 0, 0, 0.568);
         position: absolute;
         width: 15vw;
         height: 5vh;
         bottom: 2vh;
         right: 0;
         color: white;
         text-align: center;
         line-height: 5vh;
         border-radius: 5px 0 0 5px;
      }


      /* text---------------------------------- */

      .text {
         width: 100vw;
      }

      .text_l1 {
         height: 10vh;
         display: flex;
         border-bottom: 1px solid rgb(209, 209, 209);
      }

      .text_l1 p {
         width: 80vw;
         height: 10vh;
         font-size: 1.8rem;
         font-weight: bolder;
         border-right: 1px solid rgb(202, 202, 202);
      }

      .text_l1 span img {
         width: 6vw;
      }

      .text_l1 span {
         width: 20vw;
         height: 10vh;
         margin: 2vh auto;
         text-align: center;
      }

      .text_l1,
      .text_l2 {
         background-color: rgb(245, 245, 245);
      }

      .text_l2 ul {
         height: 10vh;
         display: flex;
         text-align: center;
         justify-content: space-evenly;
         /* padding: 4vh 2vw; */
      }

      .text_l2 ul li {
         margin: 2vh auto;
         height: 6vh;
         width: 30vw;
         border-right: 1px solid rgb(187, 187, 187);
      }

      .text_l2 ul li:nth-of-type(3) {
         border: none;
      }

      .text_l2 ul li span:nth-of-type(2) {
         color: rgb(255, 138, 0);
      }

      .text_l3 {
         border: 1px solid rgb(201, 201, 201);
         border-left: none;
         border-right: none;
         height: 15vh;
         width: 100vw;
      }

      .text_l3 ul li {
         width: 90vw;
         height: 5vh;
         line-height: 5vh;
         margin: 0 auto;
         display: flex;
         border-bottom: 1px solid rgb(218, 218, 218);
         /* justify-content: center; */
      }

      .text_l3 ul li:last-child {
         border: none;
      }

      .text_l3 ul li span {
         width: 45vw;
      }


      /* <!-- 经纪人房评 -------------------------------> */

      .fangping {
         width: 90vw;
         height: 20vh;
         border: 1px solid rgb(224, 224, 224);
         margin: 2vh auto;
      }

      .h1 {
         height: 7vh;
         line-height: 7vh;
         border-bottom: 1px solid rgb(224, 224, 224);
         background-image: url(../image/rentalList/right.png);
         background-repeat: no-repeat;
         background-size: 3vw;
         background-position: 80vw 2vh;
         color: rgb(255, 138, 0);
         text-indent: 2rem;
      }

      .p {
         width: 80vw;
         padding: 0 5vw;
      }

      .fangping p {
         height: 12vh;
         line-height: 3vh;
      }


      /* 看房客户记录=------------------------------- */

      .kanfang {
         width: 90vw;
         height: 12vh;
         line-height: 12vh;
         border: 1px solid rgb(224, 224, 224);
         margin: 2vh auto;
      }

      .kanfang p {
         height: 5vh;
         line-height: 5vh;
      }


      /* 位置及周边 7vh- 23vh-------------------------------------- */

      .weizhi {
         width: 90vw;
         height: 40vh;
         border: 1px solid rgb(224, 224, 224);
         margin: 2vh auto;
      }

      .weizhi>div {
         width: 85vw;
         height: 30vh;
         border: 1px solid rgb(202, 202, 202);
         margin: 1vh auto;
      }

      .weizhi p {
         height: 5vh;
         line-height: 5vh;
         font-weight: bolder;
         font-size: 1.4rem;
      }

      .weizhi #container {
         width: 85vw;
         height: 25vh;
         line-height: 5vh;
      }


      /* 小区成交历史----------------------- */

      .chengjiao {
         width: 90vw;
         height: 18vh;
         line-height: 12vh;
         border: 1px solid rgb(224, 224, 224);
         margin: 2vh auto;
      }

      .chengjiao p {
         height: 5vh;
         line-height: 5vh;
      }

      .chengjiao span {
         color: rgb(255, 138, 0);
      }


      /* 张三信息--------------------------------- */

      .zhangsan {
         width: 90vw;
         height: 10vh;
         padding: 0 5vw;
         border-top: 1px solid rgb(230, 230, 230);
         display: flex;
         justify-content: space-between;
      }

      .zhangsan li {
         height: 10vh;
         margin: 1vh auto;
      }

      .zhangsan li:nth-of-type(1) img {
         height: 7vh;
         /* margin: 1.5vh auto; */
      }

      .zhangsan li:nth-of-type(3) img,
      .zhangsan li:nth-of-type(4) img {
         height: 4vh;
         /* margin: 1.5vh auto; */
      }

      .zhangsan li:nth-of-type(3) {
         color: rgb(93, 203, 150);
      }

      .zhangsan li:nth-of-type(4) {
         color: rgb(91, 174, 222);
      }
   </style>
</head>

<body>
   <header>
   <div><img src="./imges/logo.jpg" alt=""></div>
   <div>
      <img src="./imges/my.jpg" alt="">
      <img src="./imges/xiazai.jpg" alt="">
   </div>
   </header>
   <!-- tou -->
   <p class="tou">
      <a href="#">首页</a>>
      <a href="#">北京租房</a>>
      <a href="#">房源信息</a>
   </p>
   <!-- nav -->
   <nav>
      <img src="./imges/banner.png" alt="">
      <span>分享</span>
   </nav>
   <!-- text -->
   <ul class="text">
      <li class="text_l1">
         <p>天鹅湾小区精装两居，满五唯一，业主换房急售</p>
         <span><img src="./imges/xin.png" alt=""><br> 关注</span>
      </li>
      <li class="text_l2">
         <ul>
            <li><span>租金</span><br><span>2300元/月</span></li>
            <li><span>房型</span><br><span>2室1厅</span></li>
            <li><span>面积</span><br><span>204平米</span></li>
         </ul>
      </li>
      <li class="text_l3">
         <ul>
            <li><span>楼层：高楼/17层</span><span>朝向：南北</span></li>
            <li><span>装修：精装</span><span>供暖：集体供暖</span></li>
            <li><span>年代：2007年</span><span>楼型：板楼</span></li>
         </ul>
      </li>
   </ul>
   <!-- 经纪人房评 -->
   <div class="fangping">
      <h1 class="h1">经纪人房评</h1>
      <p class="p">地理位置:晶都国际处于酒仙桥中心地带，毗邻北京三大商圈，紧邻丽都商圈，隔四环与望京商圈相望，西南紧挨燕莎商圈，地理位置优越。周边配套:颐堤港商业中心，兆维大厦...
      </p>
   </div>
   <!-- 看房客户记录 -->
   <div class="kanfang">
      <h1 class="h1">看房客户记录</h1>
      <p class="p">近一个月新增0位看房客户，共50位 </p>
   </div>
   <!-- 位置及周边 -->
   <div class="weizhi">
      <h1 class="h1">位置及周边</h1>
      <div>
         <p>地址:[黄村]时代龙和</p>
         <div id="container">
         </div>
      </div>
   </div>
   <!-- 小区成交历史 -->
   <div class="chengjiao">
      <h1 class="h1">小区成交历史</h1>
      <p class="p">3室2厅，146平米，<span>5000元</span></p>
      <p class="p">签约日期:2015-02-26</p>
   </div>
   <!-- 张三信息 -->
   <ul class="zhangsan">
      <li><img src="./imges/man.png" alt=""></li>
      <li><span>张三</span><br><span>4001581855转0008</span></li>
      <li><img src="./imges/icon1.png" alt=""><br> 致电</li>
      <li><img src="./imges/icon2.png" alt=""><br> 短信</li>
   </ul>
   <footer>
      <p>
         <a href="">北京找房无忧网</a>>
         <a href="">首页</a>
      </p>
      <ul>
         <li>
            <div>
               <img src="./imges/apple.png" alt="">
               <div>
                  <span>iphone</span><br>
                  <span>客户端</span>
               </div>
            </div>
            <div>
               <img src="./imges/android.png" alt="">
               <div>
                  <span>Android</span><br>
                  <span>客户端</span>
               </div>
            </div>
         </li>
         <li>北京找房无忧房地产经纪有限公司</li>
         <li>网络经营许可证 京ICP备20160812号-12</li>
      </ul>
   </footer>
   <script type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YDyqqv0vFDmO8EdoOibzLDkTekjbzLRO"></script>
   <script>
      var map = new BMapGL.Map("container"); // 创建地图实例 
      var point = new BMapGL.Point(113.680665, 34.804449); // 创建点坐标 
      var marker = new BMapGL.Marker(point); // 创建标注   
      map.addOverlay(marker); // 将标注添加到地图中
      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setHeading(64.5); //设置地图旋转角度
      map.setTilt(73); //设置地图的倾斜角度

      // 禁止地图旋转和倾斜可以通过配置项进行设置
      var map = new BMapGL.Map("allmap", {
         enableRotate: false,
         enableTilt: false
      });
   </script>
</body>

</html>